import { memo } from 'react';
import type { FC, PropsWithChildren } from 'react';
import {  useParams } from 'react-router-dom';
import {
  Button,
  message,
  Modal,
} from 'antd';
import { resAlipay } from '@/services/alipay';
import { resOrdersCancel, resOrdersDetail } from '@/services/orders';
import { useRequest } from 'ahooks';

const ConfirmOrders: FC<PropsWithChildren<{ refresh: Function }>> = ({
  refresh,
}) => {
  const params = useParams();
  const { runAsync: alipay, loading: alipayLoading } = useRequest(resAlipay, {
    manual: true,
  });

  return (
    <div className={'text-right py-2'}>
      <Button
        type={'link'}
        onClick={() => {
          Modal.confirm({
            title: '取消订单',
            content: '确认要取消当前订单吗？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
              resOrdersCancel(Number(params.id)).then(() => {
                message.success('订单取消成功');
                refresh();
              });
            },
          });
        }}
      >
        取消订单
      </Button>
      <Button
        type={'primary'}
        onClick={() => {
          alipay({ orders_ids: [Number(params.id)] }).then((value) => {
            location.href = value;
          });
        }}
      >
        付款
      </Button>
    </div>
  );
};

export default memo(ConfirmOrders);